<template>
    <div style="position: fixed ;right:10px;z-index: 999;" :class="bubbleBottom" v-if="RYD_State != 4">
        <el-row @click="show = true">
            <div class="bubble bubble-right" style="position: relative;" v-show="bubbleShow">
                你好！<br />
                有什么需要我们帮助的吗？

                <el-icon style="position: absolute;top:5px;right:5px;background-color: #fff;cursor: pointer ;"
                    @click.stop="closeBubble">
                    <Close />
                </el-icon>
            </div>
            <el-avatar src="/img/智能机器人模板.png" :size="50" style="cursor: pointer ;" />
        </el-row>
        <van-action-sheet v-model:show="show" title="在线解决" style="max-height: 80% ;height:80%">
            <chatui style="height: 100% ;"></chatui>
        </van-action-sheet>
    </div>
    <el-container class="layout-container-demo" style="height: 100vh" id="WindowsHomeBox">
        <el-header style="display: flex ;justify-content:space-between ;">
            <h3 style="color:#fff">Ryder IT 服务管理系统</h3>
            <div class="" v-if="RYD_State != 4">
                <div style="width:100%; height:100% ; line-height:300% ; text-align: right;font-size: 18px;color: #466ca3;">

                    <el-badge :value="otherCompany">
                        <el-select v-model="RYD_Company" @change="setCompany" size="large" style="width:100px">
                            <el-option v-for="item in companyList" :key="item.ryD_Id" :label="item.ryD_CompanyName"
                                :value="item.ryD_CompanyNo">
                            </el-option>
                        </el-select>
                    </el-badge>
                </div>
            </div>
        </el-header>
        <el-container style="height: 0vh">
            <el-aside :style="collapseStyle">
                <el-scrollbar style="background-color:#ffffff;border-right:solid 1px var(--el-menu-border-color)">
                    <el-menu :default-active="defAction" class="leftMenu" router active-text-color="#466ca3"
                        :collapse="collapse">
                        <el-sub-menu index="1" v-if="RYD_State != 4">
                            <template #title>
                                <el-icon>
                                    <Document />
                                </el-icon>
                                <span>需求管理</span>&nbsp;&nbsp;&nbsp;
                                <el-tag class="ml-2" size="small" type="danger" round
                                    v-if="demandNum[0] + demandNum[1] + demandNum[2] + demandNum[3] != 0">
                                    {{ demandNum[0] + demandNum[1] + demandNum[2] + demandNum[3] }}</el-tag>
                            </template>
                            <el-menu-item-group title="分类">
                                <el-menu-item index="WindowsDemandList_1"
                                    :route="{ name: 'WindowsDemandList', query: { type: 1 } }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>待接单&nbsp;&nbsp;&nbsp;<el-tag class="ml-2" size="small" type="danger"
                                            round>{{ demandNum[0] }}</el-tag></template>

                                </el-menu-item>
                                <el-menu-item index="WindowsDemandList_2"
                                    :route="{ name: 'WindowsDemandList', query: { type: 2 } }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>已接单&nbsp;&nbsp;&nbsp;<el-tag class="ml-2" size="small" type="danger"
                                            round>{{ demandNum[1] }}</el-tag></template>

                                </el-menu-item>
                                <el-menu-item index="WindowsDemandList_3"
                                    :route="{ name: 'WindowsDemandList', query: { type: 3 } }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>待评价&nbsp;&nbsp;&nbsp;<el-tag class="ml-2" size="small" type="danger"
                                            round>{{ demandNum[2] }}</el-tag></template>

                                </el-menu-item>
                                <el-menu-item index="WindowsDemandList_4"
                                    :route="{ name: 'WindowsDemandList', query: { type: 4 } }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>已完成</template>

                                </el-menu-item>
                                <el-menu-item index="WindowsDemandList_-2"
                                    :route="{ name: 'WindowsDemandList', query: { type: -2 } }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>暂&nbsp;&nbsp;&nbsp;&nbsp;存&nbsp;&nbsp;&nbsp;<el-tag class="ml-2"
                                            size="small" type="danger" round>{{ demandNum[3] }}</el-tag></template>

                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-menu-item index="WindowsAddDemand" :route="{ name: 'WindowsAddDemand' }" v-if="RYD_State != 4">
                            <el-icon>
                                <DocumentAdd />
                            </el-icon>
                            <template #title>发布需求</template>
                        </el-menu-item>

                        <el-menu-item index="WindowsRecordDemand" :route="{ name: 'WindowsRecordDemand' }"
                            v-if="RYD_State == 2 && RYD_State != 4">
                            <el-icon>
                                <Memo />
                            </el-icon>
                            <template #title>记录需求</template>
                        </el-menu-item>

                        <el-menu-item index="WindowsDemandConfirmation" :route="{ name: 'WindowsDemandConfirmation' }"
                            v-if="RYD_State != 4">
                            <el-icon>
                                <Management />
                            </el-icon>

                            <template #title>需求报表</template>
                        </el-menu-item>

                        <el-menu-item index="WindowsRegIt" :route="{ name: 'WindowsRegIt' }"
                            v-if="RYD_State == 1 && RYD_State != 4">
                            <el-icon>
                                <Avatar />
                            </el-icon>

                            <template #title>IT注册（非IT人员勿点）</template>
                        </el-menu-item>

                        <el-menu-item index="WindowsType" :route="{ name: 'WindowsType' }"
                            v-if="RYD_State == 3 && RYD_State != 4">
                            <el-icon>
                                <Menu />
                            </el-icon>

                            <template #title>类别管理</template>
                        </el-menu-item>

                        <el-sub-menu index="2" v-if="RYD_State == 2">
                            <template #title>
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span>人员</span>
                            </template>
                            <el-menu-item-group title="分类">
                                <el-menu-item index="WindowsPersonnel" :route="{ name: 'WindowsPersonnel' }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>人员查看</template>

                                </el-menu-item>
                                <el-menu-item index="WindowsUpdateUser" :route="{ name: 'WindowsUpdateUser' }">
                                    <!-- <el-icon>
                                        <Document />
                                    </el-icon> -->
                                    <template #title>个人资料修改</template>

                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>

                        <el-menu-item index="WindowsContingencyPlan" :route="{ name: 'WindowsContingencyPlan' }"
                            v-if="RYD_State == 4">
                            <el-icon>
                                <Menu />
                            </el-icon>

                            <template #title>应急方案管理</template>
                        </el-menu-item>
                        <!-- <el-menu-item index="WindowsChatUi" :route="{ name: 'WindowsChatUi' }">
                            <el-icon>
                                <Collection />
                            </el-icon>
                            <template #title>常用问题手册</template>
                        </el-menu-item> -->
                    </el-menu>
                </el-scrollbar>
            </el-aside>


            <el-main>
                <el-scrollbar>
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
import { Menu, Collection, Avatar, Document, Management, DocumentAdd, Close, Memo } from '@element-plus/icons-vue'
import { useWindowSize } from '@vant/use';
// eslint-disable-next-line no-unused-vars
import { provide, reactive, ref, watch } from 'vue';
import axios from "@/utils/axios";
import { ElLoading, ElMessageBox, ElNotification } from 'element-plus';
// eslint-disable-next-line no-unused-vars
import { useRoute, useRouter } from 'vue-router';
import chatui from "../ChatUi.vue";

const router = useRouter();
const route = useRoute();
let collapse = ref(false);
let bubbleShow = ref(true)
let bubbleBottom = ref('bubbleBottom')
let collapseStyle = ref({
    width: "200px",
});

let defAction = ref('WindowsAddDemand');

if (route.query.type != null) {
    defAction.value = 'WindowsDemandList_' + route.query.type;

    // let defAction = inject('defAction');
    // defAction.value="WindowsDemandList_"+route.query.type;
} else if (route.name == "WindowsDemandListDef") {
    defAction.value = "WindowsAddDemand";
} else {
    defAction.value = route.name;
}

watch(route, () => {
    defAction.value = route.name;
    getDemandNum();
});

let companyList = ref([])

let RYD_Company = ref("")
let demandNum = ref(0);
let RYD_State = ref("")
let isRef = ref(1);
let show = ref(false);

var otherCompany = ref("");

provide('isRef', isRef)

const RYD_UserId = sessionStorage.getItem('RYD_UserId');
provide('RYD_UserId', RYD_UserId)

const closeBubble = () => {
    bubbleShow.value = false;
    bubbleBottom.value = 'bubbleBottom0';
}

const { width, height } = useWindowSize();

if (width.value < 600) {
    collapse.value = true;
    collapseStyle.value = {
        width: "63px"
    };
} else {
    collapse.value = false;
    collapseStyle.value = {
        width: "200px"
    };
}
watch([width, height], () => {
    if (width.value < 600) {
        collapse.value = true;
        collapseStyle.value = {
            width: "63px"
        };
    } else {
        collapse.value = false;
        collapseStyle.value = {
            width: "200px"
        };
    }
});
let isDemandNum = ref(1);
watch(isDemandNum, () => {
    getDemandNum();
})
provide('isDemandNum', reactive({ isDemandNum }));
let setCompany = (value) => {
    const loading = ElLoading.service({
        lock: true,
        text: '切换中',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    // loading.value = true;
    let companyName = '';
    companyList.value.forEach(element => {
        if (element.ryD_CompanyNo == value) {
            companyName = element.ryD_CompanyName;
            return;
        }
    });
    axios({
        method: 'Put',
        url: "/api/SetCompany",
        data: {
            RYD_CompanyNo: value,
            ryD_UserId: RYD_UserId
        }
    }).then(res => {
        // loading.value = false;
        loading.close()
        if (res == true) {
            ElNotification({
                title: '切换成功',
                message: '当前站点为：' + companyName,
                type: 'success',
            })
            router.go(0);
            // Notify({ type: 'success', message: '成功切换为' + companyName });
        } else {

            ElNotification({
                title: 'Error',
                message: '失败',
                type: 'error',
            })
            // Notify({ type: 'danger', message: '失败' });
        }
    }).catch(() => {
        loading.close()
        // loading.value = false;
        // Notify({ type: 'danger', message: '失败' });
        ElNotification({
            title: 'Error',
            message: '失败',
            type: 'error',
        })
    })
}


let getDemandNum = () => {
    axios({
        method: 'get',
        url: '/api/DemandNum?RYD_Company=' + RYD_Company.value + '&RYD_UserId=' + RYD_UserId
    }).then(res => {
        if (res != null) {
            demandNum.value = [res[0], res[1], res[2], res[3]];
        }
    })
}
const getOtherDemandNum = () => {
    axios({
        method: 'get',
        url: '/api/OtherDemandNum?RYD_Company=' + RYD_Company.value + '&RYD_UserId=' + RYD_UserId
    }).then(res => {
        if (res == true) {
            otherCompany.value = "new";
        } else {
            otherCompany.value = "";
        }
    })
}

let initData = () => {
    Promise.all(
        [
            axios({
                method: 'get',
                url: '/api/GetCompany?RYD_UserId=' + RYD_UserId
            }).then(res => {
                RYD_Company.value = res;
            }),
            axios({
                method: 'get',
                url: '/api/SetCompany'
            }).then(res => {
                companyList.value = res;
            }),
            axios({
                method: 'get',
                url: '/api/GetState?RYD_UserId=' + RYD_UserId,
            }).then(res => {
                RYD_State.value = res;
                if (RYD_State.value == "4") {
                    ElMessageBox.confirm(
                        '请问你想打开IT服务管理系统还是应急预案管理系统?',
                        '注意',
                        {
                            confirmButtonText: '打开IT服务管理系统',
                            cancelButtonText: '打开应急预案管理系统',
                            type: 'warning',
                        }
                    ).then(() => {
                        RYD_State.value = "1"
                        })
                        .catch(() => {
                            router.push({ name: "WindowsContingencyPlan" });
                        })
                }
            }),
        ]
    ).then(() => {
        getDemandNum();
        getOtherDemandNum();
        setTimeout(() => {
            getDemandNum();
            getOtherDemandNum()
        }, 3000)
    })

}
initData();
</script>
<style>
.leftMenu .el-menu-item.is-active {
    background-color: #466ca41f;
}

#WindowsHomeBox .el-badge__content {
    top: 12px;
    right: 120px;
    border: none;
}

#WindowsHomeBox .el-menu {
    border: 0;
}
</style>
<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: #466ca3;
    color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
}


.layout-container-demo .el-main {
    padding: 0;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}

.layout-container-demo .el-menu-item:hover {
    background-color: rgba(70, 108, 163, 0.2)
}


.bubble {
    margin: 10px;
    font-size: 1rem;
    word-wrap: break-word;
    line-height: 1.5;
    overflow-wrap: break-word;
    padding: 8px 16px;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    white-space: pre-wrap;
    max-width: 680px;
    min-width: 1px;
}

.bubble-left {
    background-color: #fff;
    border-radius: 1px 10px 10px 10px;
}

.bubble-right {
    background-color: #466da338;
    border-radius: 10px 1px 10px 10px;
}

.bubbleBottom {
    bottom: 150px;
}

.bubbleBottom0 {
    bottom: 0;
}
</style>
